import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:xixi/global.dart';
import 'package:flutter/material.dart';
import 'package:xixi/http/api.dart';
import 'package:xixi/iconfont.dart';
import 'package:xixi/page/detail.dart';
import 'package:xixi/page/setting.dart';

class IndexPage extends StatefulWidget {
  IndexPage({Key key}) : super(key: key);
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  List<String> types = ['yu', 'wugui', 'my'];
  String _type = 'yu';
  String _title = '观赏鱼';
  var _list = [];

  Widget bottomNavItem(icon, title, index) {
    return Expanded(
      child: InkWell(
        onTap: () {
          if (title == '更多') {
            showModalBottomSheet(
              context: context,
              backgroundColor: Colors.transparent,
              builder: (BuildContext context) {
                return SettingCard();
              },
            ).then((val) {
              print(val);
            });
          } else {
            setState(() {
              _type = types[index];
              _title = title;
              EasyLoading.show();
              getIchongList(_type).then((res) {
                EasyLoading.dismiss();
                setState(() {
                  _list = res['list'];
                });
              });
            });
          }
        },
        child: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(
                icon,
                color: _type == types[index]
                    ? Global.backgroundColor
                    : Global.backgroundColor.withOpacity(0.6),
                size: _type == types[index] ? 23 : 16,
              ),
              SizedBox(width: 5),
              Text(
                title,
                style: TextStyle(
                  color: _type == types[index]
                      ? Global.backgroundColor
                      : Global.backgroundColor.withOpacity(0.6),
                  fontWeight: FontWeight.w700,
                  fontSize: _type == types[index] ? 16 : 13,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  void initState() {
    EasyLoading.show();
    getIchongList(_type).then((res) {
      EasyLoading.dismiss();
      setState(() {
        _list = res['list'];
      });
    });
    super.initState();
  }

  List<Widget> renderChongwuList(items) {
    List<Widget> list = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      list.add(
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailPage(
                  id: item['id'],
                  type: item['key'],
                ),
              ),
            );
          },
          child: Container(
            padding: EdgeInsets.all(4),
            decoration: BoxDecoration(
              color: Global.primaryColor.withOpacity(0.2),
              borderRadius: BorderRadius.all(Radius.circular(7)),
            ),
            width: MediaQuery.of(context).size.width / 4,
            child: Column(
              children: [
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(7)),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(7)),
                    child: FadeInImage.assetNetwork(
                      placeholder: 'assets/images/placeholder.png',
                      fadeInDuration: const Duration(milliseconds: 500),
                      image: item['img'],
                    ),
                  ),
                ),
                Text(
                  item['name'],
                  style: TextStyle(
                    color: Global.primaryColor,
                    fontSize: 12,
                    fontWeight: FontWeight.w700,
                  ),
                )
              ],
            ),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        color: Global.primaryColor.withOpacity(0.3),
        image: DecorationImage(
          image: AssetImage("assets/images/bg.png"),
          repeat: ImageRepeat.repeat,
          fit: BoxFit.none,
        ),
      ),
      child: Column(
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                  padding: EdgeInsets.fromLTRB(0, Global.paddingTop, 0, 10),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.bottomLeft,
                      end: Alignment.topRight,
                      colors: [
                        Global.primaryColor,
                        Global.primaryColor.withOpacity(0.3),
                      ],
                    ),
                    image: DecorationImage(
                      image: AssetImage("assets/images/bg.png"),
                      repeat: ImageRepeat.repeat,
                      fit: BoxFit.none,
                    ),
                  ),
                  child: Center(
                    child: Text(
                      '$_title种类',
                      style: TextStyle(
                        color: Global.backgroundColor,
                        fontSize: 15,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    padding: EdgeInsets.all(15),
                    child: SingleChildScrollView(
                      child: Wrap(
                        spacing: MediaQuery.of(context).size.width / 15,
                        runSpacing: 15,
                        children: renderChongwuList(_list),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 50,
            padding: EdgeInsets.only(bottom: 10),
            decoration: BoxDecoration(
              color: Global.primaryColor,
              image: DecorationImage(
                image: AssetImage("assets/images/bg.png"),
                repeat: ImageRepeat.repeat,
                fit: BoxFit.none,
              ),
            ),
            child: Row(
              children: [
                bottomNavItem(IconFont.yu, '观赏鱼', 0),
                bottomNavItem(IconFont.wugui, '乌龟', 1),
                bottomNavItem(IconFont.gengduo, '更多', 2),
              ],
            ),
          )
        ],
      ),
    );
  }
}
